<template>
  <div class="list-info">
    <slot name="header"></slot>
    <div class="content">
      <div class="flex">
        <div class="section"
             :style="{ width: `${props.sectionWidth}` }">
          <div class="item"
               v-for="item in props.infoList"
               :key="item.label"
               :class="{ inline: item.isInline, nowrap: item.nowrap }">
            <label v-if="item.label">{{ item.label }}</label>
            <span v-if="!item.type">{{ item.value }}</span>
          </div>
        </div>
        <aside class="relative"
               v-if="slots.aside"
               :style="{ width: `calc(100% - ${props.sectionWidth})` }">
          <slot name="aside"></slot>
        </aside>
      </div>
      <slot name="contentFooter"></slot>
    </div>
    <slot name="footer"></slot>
  </div>
</template>

<script setup>
const props = defineProps({
  infoList: Array,
  sectionWidth: {
    type: String,
    required: false,
    default: '100%'
  }
})

const slots = useSlots()
</script>

<style lang="less" scoped>
.list-info {
  padding: 12px;
  margin-bottom: 12px;
  background-color: #fff;
  .content {
    display: block;
    padding-bottom: 10px;
    border-bottom: 1px solid #f7f8fa;
    .item {
      padding: 3px 0;
      &.inline {
        display: inline-block;
        width: 50%;
      }
      &.nowrap {
        white-space: nowrap;
      }
      label {
        color: #97999b;
        &:after {
          content: '：';
        }
      }
      span {
        color: #53565a;
      }
    }
  }
}
</style>
